<template>
	<view class="content">
		<view class="bg-top">
			<img src="@/static/fault/banner_guzhang_new.png" style="width: 100%;" alt="">
		</view>
		<img src="@/static/fault/pic_title_guzhang1.png" class="pic_title_tousu1" alt="">
		<view class="mapBox" style="padding: 38rpx 0 0" >
			<view class="mapBox_title"  id="section">
				<view class="mapBox_title_view"></view>
				集团重大故障明细
			</view>
			<view class="gzmxView_nrItem" :style="{paddingBottom: isHig1 ?  '30rpx' : '' }">
				<view class="gzmxView_nrItem_card" v-for="(item,index) in tableData" :key="index">
					<img src="@/static/images/newsbg1-1.png" class="newsbgClass" alt="">
					<view class="gzmxView_nrItem_cardNr" v-if="!(isHig1 && index > 2)">
						<view class="gzmxView_nrItem_cardNr_title">{{item.Title}}</view>
						<view class="gzmxView_nrItem_cardNr_date">
							发生时间：<span style="color: #000000;">{{item.HappenTime}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							恢复时间：<span style="color: #000000;">{{item.RecoverTime ? item.RecoverTime : '未恢复'}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							{{item.Business == '-' ? '故障原因' : '故障情况'}}：<span style="color: #000000;">{{item.Reason}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date" v-if="item.Business != '-'">
							业务影响：<span style="color: #000000;">{{item.Business}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_bq" v-if="item.County">
							{{item.County}}
						</view>
					</view>
				</view>
				<view class="gengduo" @click="isHig1 = !isHig1" v-if="isHig1 && tableData.length > 3">
					展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
				</view>
				<view class="felxBox_wu" v-if="tableData.length == 0">
					无
				</view>
			</view>
			<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50rpx;margin-top: 20rpx;" alt="">
			<view class="mapBox_title"  id="section1">
				<view class="mapBox_title_view"></view>
				集团重大故障预警明细
			</view>
			<view class="gzmxView_nrItem" >
				<view class="gzmxView_nrItem_card4" v-for="(item,index) in tableData2" :key="index">
					<img src="@/static/images/newsbg2-1.png" class="newsbgClass" alt="">
					<view class="gzmxView_nrItem_cardNr" v-if="!(isHig2 && index > 2)">
						<view class="gzmxView_nrItem_cardNr_title">{{item.Title}}</view>
						<view class="gzmxView_nrItem_cardNr_date">
							发生时间：<span style="color: #000000;">{{item.HappenTime}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							恢复时间：<span style="color: #000000;">{{item.RecoverTime ? item.RecoverTime : '未恢复'}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							{{item.Business == '-' ? '故障原因' : '故障情况'}}：<span style="color: #000000;">{{item.Reason}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date" v-if="item.Business != '-'">
							业务影响：<span style="color: #000000;">{{item.Business}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_bq" v-if="item.County">
							{{item.County}}
						</view>
					</view>
				</view>
				<view class="gengduo" @click="isHig2 = !isHig2" v-if="isHig2 && tableData2.length > 3">
					展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
				</view>
				<view class="felxBox_wu" v-if="tableData2.length == 0">
					无
				</view>
			</view>
			<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50rpx;margin-top: 20rpx;" alt="">
			<view class="mapBox_title" style="margin-top: 30rpx;"  id="section2">
				<view class="mapBox_title_view"></view>
				地市重大故障明细
			</view>
			<view class="gzmxView_nrItem" :style="{paddingBottom: isHig3 ?  '30rpx' : '' }">
				
				<view class="gzmxView_nrItem_card2" v-for="(item,index) in tableData3" :key="index">
					<img src="@/static/images/newsbg3-1.png" class="newsbgClass" alt="">
					<view class="gzmxView_nrItem_cardNr" v-if="!(isHig3 && index > 2)">
						<view class="gzmxView_nrItem_cardNr_title">{{item.Title}}</view>
						<view class="gzmxView_nrItem_cardNr_date">
							发生时间：<span style="color: #000000;">{{item.HappenTime}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							恢复时间：<span style="color: #000000;">{{item.RecoverTime ? item.RecoverTime : '未恢复'}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							{{item.Business == '-' ? '故障原因' : '故障情况'}}：<span style="color: #000000;">{{item.Reason}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date" v-if="item.Business != '-'">
							业务影响：<span style="color: #000000;">{{item.Business}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_bq" v-if="item.County">
							{{item.County}}
						</view>
					</view>
				</view>
				<view class="gengduo" @click="isHig3 = !isHig3" v-if="isHig3 && tableData3.length > 3">
					展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
				</view>
				<view class="felxBox_wu" v-if="tableData3.length == 0">
					无
				</view>
			</view>
			<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50rpx;margin-top: 20rpx;" alt="">
			<view class="mapBox_title" style="margin-top: 30rpx;" id="section3">
				<view class="mapBox_title_view"></view>
				地市重保故障明细
			</view>
			<!-- tabs -->
			<u-subsection :list="tabsList" :current="activeTab" @change="tabClick" active-color="#fff"
				inactive-color="#A7ABBB" bg-color="#F1F6FF" button-color="#1B9CFF" font-size="26upx"
				class="subsection"></u-subsection>
			<view class="gzmxView_nrItem" style="margin-bottom: 0;padding-bottom: 30rpx;">
				<view class="gzmxView_nrItem_card3" v-for="(item,index) in tableData4" :key="index">
					<img src="@/static/images/newsbg4-1.png" class="newsbgClass" alt="">
					<view class="gzmxView_nrItem_cardNr" v-if="!(isHig4 && index > 2)">
						<view class="gzmxView_nrItem_cardNr_title" style="color: #2654B0;">{{item.Title}}</view>
						<view class="gzmxView_nrItem_cardNr_date">
							发生时间：<span style="color: #000000;">{{item.HappenTime}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							恢复时间：<span style="color: #000000;">{{item.RecoverTime ? item.RecoverTime : '未恢复'}}</span>
						</view>
						<view class="gzmxView_nrItem_cardNr_date">
							故障原因：<span style="color: #000000;">{{item.Reason}}</span>
						</view>
						<view class="flex_f" >
							<view class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;"  v-if="item.Speciality">
								{{item.Speciality}}
							</view>
							<view class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;"  v-if="item.County">
								{{item.County}}
							</view>
							<view class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;"  v-if="item.Zs">
								{{item.Zs}}
							</view>
							<view class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;"  v-if="item.Whsx">
								{{item.Whsx}}
							</view>
							<view class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;"  v-if="item.Fglx">
								{{item.Fglx}}
							</view>
							<view v-if="item.SinceName" class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;margin-right: 0;">
								{{item.SinceName}}
							</view>
						</view>
						<view v-if="item.NeName" class="gzmxView_nrItem_cardNr_bq" style="background-color: #E2EFFE;color: #2557B3;margin-right: 0;margin-bottom: 10rpx;">
							{{item.NeName}}
						</view>
					</view>
				</view>
				<view class="gengduo" @click="isHig4 = !isHig4" v-if="isHig4 && tableData4.length > 3">
					展开更多 <img src="@/static/picture/icon_arrow_down.png" class="icon_arrow_down" alt="">
				</view>
				<view class="felxBox_wu" v-if="tableData4.length == 0">
					无
				</view>
			</view>
		</view>
		<!-- 工单情况 -->
		<view class="listBox" id="section4">
			<img src="@/static/images/pic_title_guzhang3.png" class="pic_title_tousu2" alt="">
			<view class="mainNr mapBox">
				<!-- 超时工单 -->
				<view>
					<view class="mapBox_title" style="margin-top: 20px;">
						<view class="mapBox_title_view"></view>
						超时工单
					</view>
					<view class="mapBoxInfo mapBoxInfoBg">
						<u-row gutter="16" justify="center" style="padding-top: 30rpx;">
							<u-col span="3">
								<img src="@/static/images/pic_detail_guzhang2.png"
									style="width: 100rpx;margin: 0 auto;display: block;" alt="">
							</u-col>
							<u-col span="9">
								<view class="mapBoxInfo_Title" style="color: #fff;">
									本班次累计工单量：
									<span
										style="font-weight: bold;font-size: 36upx;margin-right: 10rpx;text-shadow: 0px 3px 0px rgba(0, 0, 0, 0.5);">{{dataQWGZQK.AllNum}}</span>张
								</view>
							</u-col>
						</u-row>
						<u-subsection :list="tabsList2" :current="activeTab2" @change="tabClick2" active-color="#3594df"
							inactive-color="#999" bg-color="transparent" button-color="#fff" font-size="26upx"
							class="subsection2" style="width: 94%;margin: 0 auto;"></u-subsection>

						<view class="hlwView" style="margin-top: 20rpx; margin-bottom: 20rpx;">
							<u-row gutter="16">
								<u-col span="4">
									<view style="text-align: center;background-color: #fff;border-radius: 20rpx;">
										<view class="networkQualityBox_item_num"
											style="color: #2654B0;padding: 10rpx 0;" >
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{activeTab2 == 0 ? dataQWGZQK.Level1Num : dataQWGZQK.Level2Num}}</span>
											<span style="font-size:24rpx">张</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 30rpx;">
											本班次累计工单量
										</view>
									</view>
								</u-col>
								<u-col span="4">
									<view
										style="text-align: center;background-color: #fff;border-radius: 20rpx;background: linear-gradient(to bottom, #fef5e6, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #ea7a0b;padding: 10rpx 0;">
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{activeTab2 == 0 ? dataQWGZQK.Willlevel1Num : dataQWGZQK.Willlevel2Num}}</span>
											<span style="font-size:24rpx">张</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 30rpx;">
											本班次即将超时工单量
										</view>
									</view>
								</u-col><u-col span="4">
									<view
										style="text-align: center;background-color: #fff;border-radius: 20rpx;background: linear-gradient(to bottom, #ffece7, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #cd1815;padding: 10rpx 0;" @click="goToDetails(2,'-1')">
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{activeTab2 == 0 ? dataQWGZQK.Outlevel1Num : dataQWGZQK.Outlevel2Num}}</span>
											<span style="font-size:24rpx">张</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 30rpx;">
											本班次已超时工单量
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="width:710upx; height:500upx">
						<view style="width:710upx; height:500upx"><l-echart ref="echartsmap"></l-echart></view>
					</view>
				</view>

				<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50upx;" alt="">

				<!-- 故障处理平均历时 -->
				<view>
					<view class="mapBox_title" style="margin-top: 10rpx;">
						<view class="mapBox_title_view"></view>
						事件平均历时
					</view>
					<view class="mapBoxInfo2">
						<view class="hlwView" style="padding-top: 40rpx; margin-bottom: 20rpx;">
							<u-row gutter="16">
								<u-col span="6">
									<view
										style="text-align: center;border-radius: 20rpx;background: linear-gradient(to bottom, #ffece7, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #cd1815;padding: 20rpx 0;">
											<span
												style="font-weight: bold;margin-right: 10rpx;font-size: 40rpx;">{{dataQWGZQK.Avgleve1}}</span>
											<span style="font-size:24rpx">小时</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 30rpx;">
											一级工单平均历时
										</view>
									</view>
								</u-col>
								<u-col span="6">
									<view
										style="text-align: center;border-radius: 20rpx;background: linear-gradient(to bottom, #fef5e6, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #ea7a0b;padding: 20rpx 0;">
											<span
												style="font-weight: bold;margin-right: 10rpx;font-size: 40rpx;">{{dataQWGZQK.Avgleve2}}</span>
											<span style="font-size:24rpx">小时</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 30rpx;">
											二级工单平均历时
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="width:710rpx; height:350rpx;margin-bottom: 20rpx;">
						<l-echart ref="chartRef3" style="width:710rpx; height:350rpx"></l-echart>
					</view>
				</view>

				<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50upx;" alt="">

				<!-- 定界定位失败站点数 -->
				<view  id="section6">
					<view class="mapBox_title" style="margin-top: 10rpx;">
						<view class="mapBox_title_view"></view>
						事件定界告警关联失败数
					</view>
					<view class="mapBoxInfo" style="height: 160rpx;border-radius: 20rpx;overflow: hidden;">
						<u-row gutter="16" justify="center" style="padding-top: 20rpx;">
						
								<view class="mapBoxInfo_Title" @click="goToZhuanqu(11)" style="width: 628rpx;height: 82rpx;line-height: 78rpx;text-indent: 57rpx;font-size: 24rpx; background: linear-gradient( 180deg, #FDF4E4 0%, #FFFFFF 100%);border-radius: 16rpx;border: 1px solid #FFFFFF;color: #5F6475;">
									事件定界告警关联失败数：
									<span
										style="font-weight: bold;font-size: 28upx;margin-right: 10rpx;color: #5855D6;">{{dataQWGZQK.FailNum}}</span>个
								</view>
						</u-row>
						<!-- <view class="paihang">
							第{{dataQWGZQK.FailSort}}名
						</view> -->
					</view>
					
					<view style="width:710rpx; height:450rpx;margin-bottom: 20rpx;">
						<l-echart ref="chartRef1" style="width:710rpx; height:450rpx"></l-echart>
					</view>
				</view>
			</view>
		</view>
		<!-- 地市隐患 -->
		<view class="listBox">
			<img src="@/static/images/pic_title_guzhang4.png" class="pic_title_tousu2" alt="">
			<view class="mainNr mapBox">
				<view>
					<view class="mapBoxInfo" style="margin: 0;width: 100%;">
						<view class="hlwView" style="padding-top: 20rpx; ">
							<u-row gutter="16">
								<u-col span="4">
									<view
										style="text-align: center;background-color: #fff;border-radius: 20rpx;height: 160rpx;">
										<view class="networkQualityBox_item_num"
											style="color: #2654B0;padding: 20rpx 0 10rpx;" @click="goToDetails(1,0)">
											<img src="@/static/images/index/icon_gongdan3.png"
												style="width: 26rpx;margin-right: 10rpx;position: relative;top: 4rpx;"
												alt="">
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{dataQWGZQK.Hour1Num}}</span>
											<span style="font-size:24rpx">个</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 10rpx;">
											蓄电池不足1小时站点数（自维）
										</view>
									</view>
								</u-col>
								<u-col span="4">
									<view
										style="text-align: center;background-color: #fff;border-radius: 20rpx;height: 160rpx;background: linear-gradient(to bottom, #fef5e6, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #ea7a0b;padding: 20rpx 0 10rpx;" @click="goToDetails(1,1)">
											<img src="@/static/images/index/icon_gongdan2.png"
												style="width: 26rpx;margin-right: 10rpx;position: relative;top: 4rpx;"
												alt="">
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{dataQWGZQK.Hour3Num}}</span>
											<span style="font-size:24rpx">个</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 10rpx;">
											蓄电池不足3小时站点数（自维）
										</view>
									</view>
								</u-col><u-col span="4">
									<view
										style="text-align: center;background-color: #fff;border-radius: 20rpx;height: 160rpx;background: linear-gradient(to bottom, #ffece7, #fff);">
										<view class="networkQualityBox_item_num"
											style="color: #cd1815;padding: 20rpx 0 10rpx;" @click="goToDetails(1,2)">
											<img src="@/static/images/index/icon_gongdan1.png"
												style="width: 26rpx;margin-right: 10rpx;position: relative;top: 4rpx;"
												alt="">
											<span
												style="font-weight: bold;margin-right: 10rpx;">{{dataQWGZQK.YhNum}}</span>
											<span style="font-size:24rpx">个</span>
										</view>
										<view class="networkQualityBox_item_title" style="padding: 0 10rpx;">
											超长、超频告警
										</view>
									</view>
								</u-col>
							</u-row>
						</view>
					</view>
					<view style="width:710upx; height:480upx;position: relative;bottom: 20rpx;">
						<view style="width:710upx; height:480upx"><l-echart ref="echartsmap2"></l-echart></view>
					</view>
				</view>
				<img src="@/static/picture/pic_fenge.png" style="width: 100%;height: 50upx;" alt="">
				<!-- 隐患工单超时数 -->
				<view  id="section5">
					<view class="mapBoxInfo" style="height: 160rpx;border-radius: 20rpx;overflow: hidden;">
							<view class="mapBoxInfo_Title" @click="goToZhuanqu(12)" style="color: #5F6475;margin: 0 auto;padding-top: 20rpx;padding-left: 54rpx; margin-top: 30rpx;width: 617rpx;height: 98rpx;background: linear-gradient( 180deg, #FFFFFF 0%, #FFFFFF 100%);border-radius: 16rpx;border: 1px solid #FFFFFF;">
								隐患工单超时数
								<img src="@/static/images/dishi/img5.png" style="width: 36upx;height: 36upx;margin: 0 16rpx;" alt="">
								<span
									style="font-weight: bold;font-size: 34upx;margin-right: 10rpx;color: #F37A00;">{{dataQWGZQK.OutTimeNum}}</span>
									<span style="color: #F37A00;">个</span>
							</view>
					</view>
					<view style="width:710rpx; height:450rpx;margin-bottom: 20rpx;">
						<l-echart ref="chartRef2" style="width:710rpx; height:450rpx"></l-echart>
					</view>
				</view>
			</view>
			
		</view>

		<u-toast ref="uToast" class="custom-toast" />
		<view>
			<u-popup v-model="show" mode="center" border-radius="12" closeable safe-area-inset-bottom
				close-icon-color="#fff">
				<view class="popupBox">
					<view class="titleView">温馨提示</view>
					<view class="boxNr">
						<view class="nrTitle">
							这里暂时没有问题描述哦！！
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 超时工单-弹窗 -->
		<view>
			<u-popup v-model="showOvertime" mode="center" border-radius="12" closeable safe-area-inset-bottom
				close-icon-color="#fff" >
				<view class="popupBox">
					<view class="titleView">温馨提示</view>
					<!-- <view class="boxNr"> -->
						  <scroll-view scroll-y="true" style="width: 490rpx;max-height: 400rpx; overflow-y: auto;">
						    <!-- 这里是您的内容 -->
							<view class="nrTitle" v-for="(item,index) in overtime">
								{{item.name}} : {{item.value}} 起
							</view>
						  </scroll-view>
					<!-- </view> -->
				</view>
			</u-popup>
		</view>
		<!-- 地市隐患 -->
		<view>
			<u-popup v-model="showHiddenTrouble" mode="center" border-radius="12" closeable safe-area-inset-bottom
				close-icon-color="#fff">
				<view class="popupBox">
					<view class="titleView">温馨提示</view>
					<!-- <view class="boxNr"> -->
						 <scroll-view scroll-y="true" style="width: 490rpx;max-height: 400rpx; overflow-y: auto;">
							<view class="nrTitle" v-for="(item,index) in hiddenTrouble">
								{{item.name}} : {{item.value}} 起
							</view>
						 </scroll-view>
					<!-- </view> -->
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script module="echarts" lang="renderjs">
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	const jsonData = require('static/map/hubei.json');

	var myChart
	export default {
		watch: {
			// 监听路由变化
			'$route'(to, from) {
				console.log('to',to,from)
				if (to.path === '/pagesJK/faultPage/index') {
					this.initPage()
					console.log('from.path',from.path)
					if(from.path === '/pagesJK/overviewPage/index'){
						console.log('999')
						if(this.$route.query.to){
							this.$nextTick(() => {
								this.scrollToElement(this.$route.query.to)
							});
						}
					}
				}
			}
		},
		data() {
			return {
				tabsList: [
					'基站类',
					'专线类'
				],
				activeTab: 0,
				tabsList2: [
					'一级工单',
					'二级工单'
				],
				activeTab2: 0,
				isHig1: true,
				isHig2: true,
				isHig3: true,
				isHig4: true,
				show: false,
				showOvertime: false,
				showHiddenTrouble: false,
				option2: {
				
					visualMap: {
						min: 0,
						max: 10,
						show: false, // 隐藏 visualMap 组件
						realtime: false,
						calculable: true,
						inRange: {
							color: ['#F37A00', '#ee4b4b']
						},
					},
				series: [{
						name: '数据',
						type: 'map',
						map: '湖北',
						left: 50,
						zoom: 1, // 设置初始缩放级别为1.2倍
						scaleLimit: {
							min: 0.5, // 最小缩放比例
							max: 2 // 最大缩放比例
						},
						selectedMode: false,
						itemStyle: {
							normal: {
								opacity: 0.8,
								borderWidth: 1,
								areaColor: '#1B9CFF',
								borderColor: '#fff',
				
								label: {
									show: true, //显示标签
									position: 'outside', //标签位置在区域内部
									textStyle: {
										color: '#000'
									},
								},
								emphasis: {
									areaColor: '#5095B3',
									borderColor: '#fff',
									opacity: 1,
									label: {
										show: true, //高亮显示标签
										position: 'inside', //高亮时标签位置也在区域内部
										textStyle: {
											color: '#fff'
										},
									}
								}
							}
				
						},
						visualMapIndex: 0,
						data: [],
					}]
				},
				option3: {
					visualMap: {
						min: 0,
						max: 10,
						show: false, // 隐藏 visualMap 组件
						// text: ['High', 'Low'],
						realtime: false,
						calculable: true,
						inRange: {
							color: ['#F37A00', '#ee4b4b']
						}
					},
					series: [{
						name: '数据',
						type: 'map',
						map: '湖北',
						left: 50,
						zoom: 1, // 设置初始缩放级别为1.2倍
						scaleLimit: {
							min: 0.5, // 最小缩放比例
							max: 2 // 最大缩放比例
						},
						selectedMode: false,
						itemStyle: {
							normal: {
								opacity: 0.8,
								borderWidth: 1,
								areaColor: '#1B9CFF',
								borderColor: '#fff',
					
								label: {
									show: true, //显示标签
									position: 'outside', //标签位置在区域内部
									textStyle: {
										color: '#000'
									},
								},
								emphasis: {
									areaColor: '#5095B3',
									borderColor: '#fff',
									opacity: 1,
									label: {
										show: true, //高亮显示标签
										position: 'inside', //高亮时标签位置也在区域内部
										textStyle: {
											color: '#fff'
										},
									}
								}
							}
					
						},
						visualMapIndex: 0,
						data: [],
					}]
				},
				arr: [],
				tableData: [],
				tableData2: [],
				tableData3: [],
				tableData4: [],
				overtime: [],
				overtimeList: [],
				overtimeList2: [],
				overtimeList3: [],
				overtimeList4: [],

				dataQWGZQK: {},
				arr2: [],
				hiddenTrouble: [],
				snyhCityList: [],
				snyhCityList2: [],
				snyhCityList3: [],
				snyhCityList4: [],
			};
		},
		mounted() {
			this.$nextTick(() => {
				let selectItem = document.getElementsByClassName('u-item-bg')[1]
				if (this.activeTab2 == 0) {
					selectItem.classList.add('select-left')
					selectItem.classList.remove('select-right')
				} else {
					selectItem.classList.remove('select-left')
					selectItem.classList.add('select-right')
				}
			})
			this.initPage()
			
			
		},
		methods: {
			// 滚动到页面的特定元素
			scrollToElement(to) {
				if (to) {
					this.$nextTick(() => {
					   uni.createSelectorQuery().select('#' + to).boundingClientRect((rect) => {
						 if (rect) {
						   uni.pageScrollTo({
							 scrollTop: rect.top - 100,
							 duration: 300
						   });
						 }
					   }).exec();
					});
				}
			},
			initPage() {
				//集团重大故障明细
				this.getjtList()
				//集团重大故障预警明细
				this.getjtwarnList()
				//地市重大故障明细
				this.getsnList()
				//地市重保故障明细
				this.getsnzbList()
				//工单量
				// this.getDataZYSGGDL()
				//地市工单情况
				this.getworkcityData()
				// 定界定位告警关联
				this.getposiCountyList()
				//隐患超时工单数
				this.gethiddenCountyList()
				// 故障-全网故障情况（全省）
				this.getmalData()
				// 地市隐患（地市）
				this.getsnyhCityList()
				this.getEventCityList()
			},
			// 故障 - 定界定位告警关联
			async getposiCountyList() {
				let data = await this.$api.getposiCountyList(); // 概览 - 指标
				// console.log('概览 - 网络质量',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.PositionNum)
					})
					let names = arr
					let values1 = arr2
					this.initEventCity(names, values1)
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 故障 - 隐患超时工单数
			async gethiddenCountyList() {
				let data = await this.$api.gethiddenCountyList(); // 概览 - 指标
				// console.log('概览 - 网络质量',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.TimeoutNum)
					})
					let names = arr
					let values1 = arr2
					this.initEventCity2(names, values1)
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 故障 - 工单平均历时（地市）
			async getEventCityList() {
				let data = await this.$api.getEventCityList(); // 概览 - 指标
				// console.log('概览 - 网络质量',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.AvgLevel1)
						arr3.push(item.AvgLevel2)
					})
					let names = arr
					let values1 = arr2
					let values2 = arr3
					this.initEventCity3(names, values1, values2)
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 工单平均历时柱状图
			async initEventCity3(names, values1, values2) {
				// 5G分流比
				let option = {
					grid: {
						left: '50rpx',
						right: '30rpx',
						top: '30rpx',
						buttom: '20rpx',
					},
					legend: {
						bottom: 0,
						left: 'center',
						itemWidth: 10, // 设置图例图形宽度
						itemHeight: 10, // 设置图例图形高度
						itemGap: 15, // 设置图例图形间距
					},
					tooltip: {
						trigger: 'axis',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: names,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							// max: 100, //最大百分比
							interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + 'h';
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: values1,
						type: 'bar',
						name: '一级工单平均历时',
						yAxisIndex: 0,
						itemStyle: {
							color: '#ff3a30',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 6
					}, {
						data: values2,
						type: 'bar',
						name: '二级工单平均历时',
						yAxisIndex: 0,
						itemStyle: {
							color: '#ff9501',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 6
					}]
				}
				const chart1 = await this.$refs.chartRef3.init(echarts)
				chart1.setOption(option)
			},
			
			// 工单平均历时柱状图
			async initEventCity(names, values1) {
				// 5G分流比
				let option = {
					grid: {
						left: '50rpx',
						right: '30rpx',
						top: 10,
						buttom: 20,
					},
					legend: {
						bottom: 0,
						left: '42',
						itemWidth: 10, // 设置图例图形宽度
						itemHeight: 10, // 设置图例图形高度
						itemGap: 15, // 设置图例图形间距
					},
					tooltip: {
						trigger: 'axis',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: names,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							// max: 100, //最大百分比
							// interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '';
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: values1,
						type: 'bar',
						name: '事件定界告警关联失败数',
						yAxisIndex: 0,
						itemStyle: {
							color: '#5855D6',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 6
					}]
				}
				const chart1 = await this.$refs.chartRef1.init(echarts)
				chart1.setOption(option)
				// 添加点击事件监听器
				chart1.on('click', function(params) {
					// console.log('点击事件监听器',params)
					let name = params.name; // 获取点击区域的名称
					this.$router.push({
						path:'/pagesJK/details/zhuanqu1',
						query:{ 
						   cityName: uni.getStorageSync('cityName'),
						   districtName: name,
						   type: 11,
						},
						
					});
				}.bind(this));
			},
			async initEventCity2(names, values1) {
				// 5G分流比
				let option = {
					grid: {
						left: '50rpx',
						right: '30rpx',
						top: 10,
						buttom: 20,
					},
					legend: {
						bottom: 0,
						left: '42',
						itemWidth: 10, // 设置图例图形宽度
						itemHeight: 10, // 设置图例图形高度
						itemGap: 15, // 设置图例图形间距
					},
					tooltip: {
						trigger: 'axis',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: names,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							// max: 100, //最大百分比
							// interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '';
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: values1,
						type: 'bar',
						name: '隐患工单超时数',
						yAxisIndex: 0,
						itemStyle: {
							color: '#F37A00',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 6
					}]
				}
				const chart1 = await this.$refs.chartRef2.init(echarts)
				chart1.setOption(option)
				// 添加点击事件监听器
				chart1.on('click', function(params) {
					// console.log('点击事件监听器',params)
					let name = params.name; // 获取点击区域的名称
					this.$router.push({
						path:'/pagesJK/details/zhuanqu1',
						query:{ 
						   cityName: uni.getStorageSync('cityName'),
						   districtName: name,
						   type: 12,
						},
						
					});
				}.bind(this));
			},
			goToDetails(type,navType){
				let nav = navType == '-1' ? this.activeTab2 : navType
				this.$router.push({ 
					path:'/pagesJK/faultPage/components/Tab1Details1',
					query:{ 
					   cityName: uni.getStorageSync('cityName'),
					   type: type,
					   navType: nav
					}
				});
			},
			goToZhuanqu(type){
				this.$router.push({ 
					path:'/pagesJK/details/zhuanqu1_1',
					query:{  
					   cityName: uni.getStorageSync('cityName'),
					   type: type
					}
				});
			},
			// 点击切割类型
			tabClick(index) {
				this.activeTab = index
				this.getsnzbList()
			},
			// 工单情况tab切换
			tabClick2(index) {
				this.$nextTick(() => {
					let selectItem = document.getElementsByClassName('u-item-bg')[1]
					if (index == 0) {
						selectItem.classList.add('select-left')
						selectItem.classList.remove('select-right')
					} else {
						selectItem.classList.remove('select-left')
						selectItem.classList.add('select-right')
					}
				})
				// selectItem.style.left = index == 0 ? '14rpx' : '130rpx'
				this.activeTab2 = index
				this.getworkcityData()
			},
			//更多展开
			onGD() {
				this.isHig = !this.isHig
			},
			//重要事故 - 地市工单情况
			async getworkcityData() {
				let params = `?category=${this.activeTab2+1}`
				let data = await this.$api.getworkcityData(params);
				if (data.Code == 200) {
					// console.log('data.Data地市工单情况',data.Data)
					let arr = []
					let arr2 = []
					let arr3 = []
					let arr4 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.WorkNum)
						arr3.push(item.WilltimeNum)
						arr4.push(item.OvertimeNum)
					})
					let names = arr
					let values1 = arr2
					let values2 = arr3
					let values3 = arr4
					this.mYChartmap(names,values1,values2,values3)
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//重要事故 - 工单量
			// async getDataZYSGGDL() {
			// 	let data = await this.$api.getDataZYSGGDL();
			// 	// console.log('概览 - 重要事故 - 工单量 ',data)
			// 	if (data.Code == 200) {
			// 		this.dataZYSGGDL = data.Data
			// 	} else {
			// 		uni.showToast({
			// 			title: data.Message,
			// 			icon: 'none',
			// 			duration: 5000,
			// 			mask: true,
			// 		});
			// 	}
			// },
			//故障-全网故障情况（全省）
			async getmalData() {
				let data = await this.$api.getmalCityData();
				console.log('概览 - 重要事故 - 工单量 ',data)
				if (data.Code == 200) {
					this.dataQWGZQK = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//集团重大故障明细
			async getjtList() {
				let data = await this.$api.getjtList(); // 概览 -集团重大故障明细
				if (data.Code == 200) {
					this.tableData = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//集团重大故障预警明细
			async getjtwarnList() {
				let data = await this.$api.getjtwarnList(); // 概览 - 集团重大故障预警明细
				if (data.Code == 200) {
					this.tableData2 = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//地市重大故障明细
			async getsnList() {
				let data = await this.$api.getsnList(); // 概览 - 地市重大故障明细
				if (data.Code == 200) {
					for (let item of data.Data) {
						item['isLong'] = true
						item['playState'] = 'play'
					}
					this.tableData3 = data.Data
					this.$nextTick(() => {
						let noticeBox = document.getElementsByClassName('u-notice-box')
						let noticeText = document.getElementsByClassName('u-notice-text')
						for (var i = 0; i < noticeBox.length; i++) {
							this.$set(this.tableData3[i], 'isLong', noticeText[i].offsetWidth > noticeBox[i].offsetWidth ? true : false)
						}
					})
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			// 点击滚动-播放/暂停
			handleChangePlayState(item) {
				item.playState = item.playState == 'paused' ? 'play' : 'paused'
			},
			//地市重保故障明细
			async getsnzbList() {
				let params = `?category=${this.activeTab+1}`
				let data = await this.$api.getsnzbList(params); // 概览 - 地市重保故障明细
				if (data.Code == 200) {
					this.tableData4 = data.Data
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			//本班次已超时工单量
			onOvertime(type) {
				this.overtime = []
				if (type == 0) {
					this.overtime = this.overtimeList3
				} else if (type == 1) {
					this.overtime = this.overtimeList2
				} else {
					this.overtime = this.overtimeList
				}
				if (this.overtime.length > 0) {
					this.showOvertime = true
				}
			},
			// 地市隐患点击弹窗
			onHiddenTrouble(type) {
				this.hiddenTrouble = []
				if (type == 0) {
					this.hiddenTrouble = this.snyhCityList
				} else if (type == 1) {	
					this.hiddenTrouble = this.snyhCityList2
				} else {
					this.hiddenTrouble = this.snyhCityList3
				}
				if (this.hiddenTrouble.length > 0) {
					this.showHiddenTrouble = true
				}
			},
			//地图切换
			change(index) {
				if (index == 1 || index == 2) {
					this.current = index;
				}
			},
			async mYChartmap(names,values1,values2,values3) {
				let option = {
					grid: {
						left: '50px',
						right: '30px',
						top: 10,
						bottom: 100,
					},
					legend: {
						bottom: 10,
						left: 'center',
						itemWidth: 10, // 设置图例图形宽度
						itemHeight: 10, // 设置图例图形高度
						itemGap: 10, // 设置图例图形间距
						textStyle: {
							color: '#A7ABBB' // 字体颜色改为白色
						},
					},
					tooltip: {
						trigger: 'axis',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: names,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							interval: 0,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							// max: 100, //最大百分比
							// interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value ;
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: values1,
						type: 'bar',
						name: '本班次累计工单量',
						yAxisIndex: 0,
						itemStyle: {
							color: '#2654B0',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}, {
						data: values2,
						type: 'bar',
						name: '本班次即将超时工单量',
						yAxisIndex: 0,
						itemStyle: {
							color: '#FF9501',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}, {
						data: values3,
						type: 'bar',
						name: '本班次已超时工单量',
						yAxisIndex: 0,
						itemStyle: {
							color: '#D61515',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}]
				}
				const chart1 = await this.$refs.echartsmap.init(echarts)
				chart1.setOption(option)
				// 添加点击事件监听器
				chart1.on('click', function(params) {
					// console.log('点击事件监听器',params)
					let name = params.name; // 获取点击区域的名称
					this.$router.push({
						path:'/pagesJK/faultPage/components/Tab1Details2',
						query:{ 
						   cityName: uni.getStorageSync('cityName'),
						   districtName: name,
						   type: 2,
						   navType: this.activeTab2
						},
						
					});
				}.bind(this));
				
			},
			// 故障-地市隐患（地市）
			async getsnyhCityList() {
				let data = await this.$api.getsnyhCityList();
				// console.log('概览 - 地市工单情况 ',data)
				if (data.Code == 200) {
					let arr = []
					let arr2 = []
					let arr3 = []
					let arr4 = []
					data.Data.forEach(item => {
						arr.push(item.County)
						arr2.push(item.Hour1Num)
						arr3.push(item.Hour3Num)
						arr4.push(item.OverClockNum)
					})
					let names = arr
					let values1 = arr2
					let values2 = arr3
					let values3 = arr4
					this.mYChartmap2(names,values1,values2,values3)
				} else {
					uni.showToast({
						title: data.Message,
						icon: 'none',
						duration: 5000,
						mask: true,
					});
				}
			},
			async mYChartmap2(names,values1,values2,values3) {
				let option = {
					grid: {
						left: '50px',
						right: '30px',
						top: 20,
						bottom: 110,
					},
					legend: {
						bottom: 0,
						left:40,
						orient: 'vertical', // 垂直排列
						itemWidth: 10, // 设置图例图形宽度
						itemHeight: 10, // 设置图例图形高度
						itemGap: 10, // 设置图例图形间距
						textStyle: {
							color: '#A7ABBB' // 字体颜色改为白色
						},
					},
					tooltip: {
						trigger: 'axis',
						confine: true, // 将tooltip框限制在图表的区域内
						textStyle: {
							color: '#FFFFFF' // 字体颜色改为白色
						},
						backgroundColor: '#656565', // 背景颜色改为黑色
						borderColor: '#656565'
					},
					xAxis: {
						axisLine: {
							show: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						},
						axisTick: {
							show: false
						},
						type: 'category',
						data: names,
						axisLabel: {
							formatter: function(value) {
								return value.split('').join('\n');
							},
							rotate: -30,
							margin: 20,    // 增加文字与柱子之间的间距，避免文字挡住柱子
							fontSize: 10,
							color: '#5C5C5C' // 设置标签颜色
						}
					},
					yAxis: [{
							min: 0, //最小百分比
							// max: 100, //最大百分比
							// interval: 25, // 每 25% 画一条线
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value ;
								}
							},
							type: 'value',
							axisLine: {
								show: true, // 显示y轴
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							},
							splitLine: {
								show: true,
								lineStyle: {
									type: 'dotted', // 点线
									color: '#ccc', // 线条颜色
									dashOffset: 0
								}
							}
						},
						{
							axisLabel: {
								color: '#5C5C5C', // 设置标签颜色
								formatter: function(value) {
									return value + '%';
								}
							},
							type: 'value',
							// name: '退服率',
							position: 'right',
							alignTicks: true,
							lineStyle: {
								type: 'dotted', // 点线
								color: '#ccc', // 线条颜色
								dashOffset: 0
							}
						}
					],
					series: [{
						data: values1,
						type: 'bar',
						name: '蓄电池不足1小时站点数（自维）',
						yAxisIndex: 0,
						itemStyle: {
							color: '#2654B0',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}, {
						data: values2,
						type: 'bar',
						name: '蓄电池不足3小时站点数（自维）',
						yAxisIndex: 0,
						itemStyle: {
							color: '#FF9501',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}, {
						data: values3,
						type: 'bar',
						name: '超长超频隐患数量',
						yAxisIndex: 0,
						itemStyle: {
							color: '#D61515',
							borderRadius: 4,
							borderWidth: 0
						},
						barWidth: 5
					}]
				}
				const chart1 = await this.$refs.echartsmap2.init(echarts)
				chart1.setOption(option)
			
				// 添加点击事件监听器
				chart1.on('click', function(params) {
					// console.log('点击事件监听器',params)
					let name = params.name; // 获取点击区域的名称
					this.$router.push({
						path:'/pagesJK/faultPage/components/Tab1Details2',
						query:{ 
						   cityName: uni.getStorageSync('cityName'),
						   districtName: name,
						   type: 1,
						   navType: 0
						}
					});
				
				}.bind(this));
			},
			async initChart() {
				const chart = await this.$refs.myChart.init(echarts);
				chart.setOption(this.option)
			},
			//问号弹窗
			onWhat() {
				this.show = true
			},

		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #CCE7FF;
		position: relative;
		top: 80rpx;
		padding-bottom: 80rpx;
	}

	.pic_title_tousu1 {
		width: 384upx;
		height: 110upx;
		position: absolute;
		top: 190upx;
		left: 20upx;
	}

	.bg-top {
		width: 750rpx;
	}

	.gengduo {
		width: 710upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #F1F6FF;
		position: absolute;
		bottom: 0;
		left: 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24upx;
		color: #2654B0;

		.icon_arrow_down {
			width: 24upx;
			height: 12upx;
			margin-left: 13upx;
		}
	}

	.mapBox {
		width: 710rpx;
		margin: 0 auto;
		margin-top: -100rpx;
		position: relative;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;

		.mapBox_title {
			display: flex;
			align-items: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #363636;
			font-style: normal;
			text-transform: none;
			padding: 0 40rpx;

			.mapBox_title_view {
				width: 10rpx;
				height: 40rpx;
				background: #1B9CFF;
				border-radius: 5rpx;
				margin-right: 20rpx;
			}
		}

		.mapBox_title_nr {
			display: flex;
			padding-left: 34rpx;
			margin-top: 25rpx;
			align-items: center;
			padding: 0 40rpx;

			.test {
				font-size: 28rpx;
				color: #5F6475;
				margin-right: 14rpx;
			}

			.icon {
				width: 32rpx;
				height: 32rpx;
				margin-right: 42rpx;
			}

			.number {
				color: #000000;
				font-size: 36rpx;
				font-weight: 700;
				margin-right: 10rpx;
			}

			.test1 {
				margin-top: 4rpx;
				color: #000000;
				font-size: 24rpx;
			}
		}

	}

	.mainNr {
		.mainBox {
			width: 710rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			position: relative;
			padding: 30upx;
			position: relative;
		}

		.felxBox_wu {
			margin: 20rpx 70rpx;
		}

		.felxBox {
			display: flex;
			flex-wrap: wrap;

			.mainBox_left {
				width: 64upx;
				height: 64upx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background: #1B9CFF;
				box-shadow: 0 10upx 5upx 1upx rgba(27, 156, 255, 0.16);
				margin-right: 23upx;
			}

			.mainBox_right {
				width: 550upx;

				.mainBox_right_title {
					width: 100%;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 34upx;
					color: #000000;
					line-height: 45upx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.mainBox_right_date,
				.mainBox_right_sf,
				.mainBox_right_dq {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #A7ABBB;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-top: 20upx;
				}

				.mainBox_right_sf,
				.mainBox_right_dq {
					margin-top: 10upx;
				}
			}
		}

	}

	.listBox {
		width: 710upx;
		margin: 20rpx auto;

		.pic_title_tousu2 {
			// width: 337upx;
			width: 100%;
			height: 110upx;
		}

		.mainNr {
			background: #FFFFFF;
			box-shadow: 0px 0px 10rpx 1px rgba(218, 231, 254, 0.2);
			border-radius: 16rpx;
			border: 1px solid #DAE8FE;
			margin-top: -30rpx;
			position: relative;

			.mapBoxInfo{
				// padding: 32upx 62upx;
				width: 94%;
				margin: 20rpx auto 0;
				background: url(@/static/images/pic_detail_guzhang_bg1-1.png) no-repeat;
				background-size: cover;
				border-radius: 20rpx;
				padding-bottom: 3	0rpx;
				overflow: hidden;
				position: relative;
				.mapBoxInfo_top {
					display: flex;
					align-items: center;
					padding: 0 6upx;

					.mapBoxInfo_Title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28upx;
						color: #5F6475;
						font-style: normal;
						text-transform: none;
					}

					.mapBoxInfo_topTab {
						height: 40upx;
						font-size: 24upx;
						color: #FF4D4D;
						padding: 4upx 10upx;
						background: #FFFFFF;
						border-radius: 8upx;
						border: 1px solid #FF4D4D;
					}
				}

				.mapBoxInfo_Num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}

				.mapBoxInfo_main {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20upx;

					.mapBoxInfo_Title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28upx;
						color: #5F6475;
						font-style: normal;
						text-transform: none;
					}
				}

				.mapBoxInfo_bom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 22upx;

					.mapBoxInfo_bom_title {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;

						.mapBoxInfo_bom_title_top {
							display: inline-block;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #5F6475;
							font-style: normal;
							text-transform: none;
						}

						.mapBoxInfo_bom_view {
							margin-top: 25rpx;
						}
					}
				}
				.paihang{
					width: 77rpx;
					height: 36rpx;
					text-align: center;
					line-height: 36rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					background: #D61515;
					border-radius: 0 16rpx 0 16rpx;
					position: absolute;
					top: 2rpx;
					right: 2rpx;
				}
			}
			.mapBoxInfoBg{
				background: url(@/static/images/pic_detail_guzhang_bg1.png) no-repeat;background-size: 100%;
			}
			.mapBoxInfo2 {
				// padding: 32upx 62upx;
				width: 94%;
				margin: 20rpx auto 0;
				height: 200rpx;
				background: url(@/static/images/pic_detail_guzhang_bg1-1.png) no-repeat;
				background-size:cover;

				.mapBoxInfo_top {
					display: flex;
					align-items: center;
					padding: 0 6upx;

					.mapBoxInfo_Title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28upx;
						color: #5F6475;
						font-style: normal;
						text-transform: none;
					}

					.mapBoxInfo_topTab {
						height: 40upx;
						font-size: 24upx;
						color: #FF4D4D;
						padding: 4upx 10upx;
						background: #FFFFFF;
						border-radius: 8upx;
						border: 1px solid #FF4D4D;
					}
				}

				.mapBoxInfo_Num {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24upx;
					color: #000000;
					font-style: normal;
					text-transform: none;
				}

				.mapBoxInfo_main {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 20upx;

					.mapBoxInfo_Title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28upx;
						color: #5F6475;
						font-style: normal;
						text-transform: none;
					}
				}

				.mapBoxInfo_bom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-top: 22upx;

					.mapBoxInfo_bom_title {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;
						align-items: center;
						flex-direction: column;

						.mapBoxInfo_bom_title_top {
							display: inline-block;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #5F6475;
							font-style: normal;
							text-transform: none;
						}

						.mapBoxInfo_bom_view {
							margin-top: 25rpx;
						}
					}
				}
			}
		}
	}

	.popupBox {
		.titleView {
			width: 100%;
			height: 93upx;
			line-height: 93upx;
			background: #1B9CFF;
			font-family: Segoe UI, Segoe UI;
			font-weight: bold;
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;

		}

		.boxNr {
			width: 490rpx;
			background: #F7F9FC;
			max-height: 400rpx;
			overflow-y: auto;
		}

		.nrTitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #000000;
			font-style: normal;
			text-transform: none;
			padding: 20upx 40upx;
			float: left;

		}

	}

	.hlwView {
		width: 94%;
		margin: 0 auto;
		position: relative;

		.flex_viewTitle {
			width: 162rpx;
			height: 60rpx;
			background: #FFFFFF;
			line-height: 60rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 30rpx;
			color: #5F6475;
			font-style: normal;
			text-transform: none;
			position: absolute;
			top: -32rpx;
			left: 40rpx;
		}
	}

	.networkQualityBox_item_title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #666;
		font-style: normal;
		text-transform: none;
		width: 100%;

	}

	.networkQualityBox_item_num {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 34rpx;
		color: #000000;
		font-style: normal;
		text-transform: none;
	}

	.icon_warm {
		width: 49upx;
		height: 49upx;
		margin-right: 18upx;
	}

	.icon_warm2 {
		width: 28upx;
		height: 34upx;
		margin-right: 18upx;
	}

	.u-tabs {
		padding: 0 180rpx;
	}

	.subsection {
		width: 650upx;
		height: 60upx;
		margin: 20rpx auto;
	}

	/deep/ .u-item-bg,
	.u-subsection {
		border-radius: 30upx !important;
	}

	/deep/ .subsection2 {
		.u-item {
			background-color: #e0ebfc;
			overflow: hidden;
			border-radius: 20upx;
			margin: 0 10rpx;

			.u-item-text {
				color: #999;
			}
		}

		.u-item-bg {
			border-radius: 20rpx !important;
		}

		.select-left {
			left: 14rpx !important;
			right: auto !important;
		}

		.select-right {
			left: auto !important;
			right: 14rpx !important;
		}

		// .u-item-bg{
		// 	left: 14rpx!important;
		// }
	}

	/deep/ .u-navbar-content-title {
		width: 550rpx !important;
		left: 100rpx !important;
		right: 100rpx !important;
	}

	// ==========
	.gzmxView_nrItem {
		// width: 667rpx;
		width: 100%;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(218, 231, 254, 0.2);
		border-radius: 16rpx;
		margin-bottom: 18rpx;
		padding: 0 30rpx;
		position: relative;
		overflow: hidden;

		.felxBox_wu {
			margin: 20rpx 40rpx;
		}
	}

	.gzmxView_nrItem_card,
	.gzmxView_nrItem_card2,
	.gzmxView_nrItem_card3,
	.gzmxView_nrItem_card4 {
		// width: 612rpx;
		width: 100%;
		margin: 22rpx auto 0;
		border-radius: 16rpx;
		overflow: hidden;
		border: 1px solid #F5E7E1;
		background-color: #FDF3EE;
		position: relative;
		.gzmxView_nrItem_cardNr {
			margin-left: 170rpx;
			padding: 20rpx 20rpx 10rpx 20rpx;

			.gzmxView_nrItem_cardNr_title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #86291D;
				line-height: 42rpx;
			}

			.gzmxView_nrItem_cardNr_date {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #A7ABBB;
				margin-top: 14rpx;
			}

			.gzmxView_nrItem_cardNr_bq {
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				font-size: 20rpx;
				color: #86291D;
				background: #F8E9E5;
				border-radius: 8rpx;
				margin-right: 8rpx;
				margin-top: 12rpx;
				padding: 0 12rpx;
				display: inline-block;
				
			}
		}
	}
	.newsbgClass{
		width: 170rpx;
		position: absolute;
		top: -1px;
		left: -1px;
	}
	.gzmxView_nrItem_card2 {
		border: 1px solid #F9F0EC;
		background-color: #FEF7EA;
		padding-bottom: 20rpx;

	}

	.gzmxView_nrItem_card3 {
		border: 1px solid #D1DCFE;
		background-color: #EFF4FE;
		// padding-bottom: 20rpx;
	}

	.gzmxView_nrItem_card4 {
		border: 1px solid #F5E7E1;
		background-color: #FDF3EE;
		
		padding-bottom: 20rpx;
	}

	/deep/ .u-notice-text {
		font-weight: bold;
	}

	/deep/ .u-notice-bar {
		padding: 0 !important;
	}
</style>